<template>
  <div class="number-select" v-if="!getIsPhone">
    <ab-options 
      :options="options" 
      :activeSwitchIndex="activeSwitchIndex"
      @click="updateIndex"
      :showIntegrate="showIntegrate"
    ></ab-options>
    <play-instruction 
      :instruction="instruction"
      >
    </play-instruction>
    <div class="number-select-area" v-if="!showIntegrate">
      <div 
        class="select-row" 
        v-for="(item, pIndex) in list" 
        :key="item.key"
        >
        <lottery-box-sebo
          class="sebo-box-adjust"
          :class="classNames(number.selected, number.defaultClass)"
          v-for="(number,sIndex) in item.numbers"
          :key="number.id"
          :context="number.context"
          :parameter="number.parameter[activeSwitchIndex].number"
          :numStr="number.number"
          @click.native="changeSelectionState(sIndex, pIndex)"
        ></lottery-box-sebo>
      </div>
    </div>
  </div>
  <div v-else class="number-select-phone">
    <ab-options 
      ref='ab'
      :options="options" 
      :activeSwitchIndex="activeSwitchIndex"
      @click="updateIndex"
      @on-msg="updateOptionsState"
    ></ab-options>
    <lottery-box-sebo-phone
      v-for="item in getCurrentLotteryState"
      :item="item"
      :key="item.id"
      @click="handleUpdateData"
      class="select-row-adjust"
      :activeSwitchIndex="activeSwitchIndex"
    ></lottery-box-sebo-phone>
  </div>
</template>

<script>
import PlayInstruction from '@/components/play-instruction/play-instruction'
import LotteryBoxSeboPhone from '@/components/lottery-type/common/lottery-box-sebo-phone'
import AbOptions from '@/components/ab-options/ab-options'
import { boxWithCleanerMixin } from '@/assets/js/mixin.js'
export default {
  mixins: [boxWithCleanerMixin],
  components: {
    PlayInstruction,
    AbOptions,
    LotteryBoxSeboPhone
  },
  data() {
    return {
      instruction: '当期开出的最后一位号码为特码',
      // 快速选号（整合/快捷选号）
      options: [
        {
          id: 'fastchoose',
          name: '快捷选号',
          disabled: false
        }
      ],
       // 快速选择
      showButtons: false,
      // 快速选择disabled
      fastchooseDisabled: false,
      // 整合disabled
      integrateDisabled: false,     
      // 默认a面
      activeSwitchIndex: 0,
      // 是否显示整合 
      showIntegrate: false
    }
  },
  methods: {
    // 改变球的选中状态/非整合
    changeSelectionState(sIndex, pIndex) {
      let numberObj = this.list[pIndex].numbers[sIndex]
      numberObj.selected = numberObj.selected ? false : true
      this.setBallState(this.list)
    },
    updateOptionsState(item) {
      if (item.id == 'integrate') {
        if (item.active) {
          this.showIntegrate = true
          this.options.forEach(option => {
            if (option.id == 'fastchoose') {
              option.disabled = true
            }
          })
        } else {
          this.showIntegrate = false
          this.options.forEach(option => {
            if (option.id == 'fastchoose') {
              option.disabled = false
            }
          })
        }
      } else {
        if (item.active) {
          this.showFastChooseButtons = true
          this.options.forEach(option => {
            if (option.id == 'integrate') {
              option.disabled = true
            }
          })
        } else {
          this.showFastChooseButtons = false
          this.options.forEach(option => {
            if (option.id == 'integrate') {
              option.disabled = false
            }
          })
        }
      }
    },
    classNames(selected, className) {
      let classList = []
      if (className) {
        classList.push(className)
      } 
      if (selected) {
        classList.push(`number-box-select-${className}`)
      }
      return classList.join(' ')
    },
    // ab面高亮
    updateIndex(index) {
      this.activeSwitchIndex = index
    },
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
@media screen and (min-width 750px)
  .select-box >>> .box-top  
    color #fff 
    line-height 20px
    border-radius 10px
    width 35px
  .red >>> .context
    background $color-ball-red
  .blue >>> .context 
    background $color-ball-blue
  .green >>> .context  
    background $color-ball-green
  .number-box-select-red >>> .num-str 
    color $color-ball-red 
  .number-box-select-green >>> .num-str 
    color $color-ball-green 
  .number-box-select-blue >>> .num-str 
    color $color-ball-blue
  .number-box-select-red >>> .parameter 
    color $color-ball-red !important 
  .number-box-select-green >>> .parameter 
    color $color-ball-green !important
  .number-box-select-blue >>> .parameter 
    color $color-ball-blue !important
  .number-select
    .number-select-area
      width 100%
      box-sizing border-box 
      padding-left 20px
      .select-row
        display flex
        width 100%
        box-sizing border-box
        flex-wrap wrap
        &:first-child 
          flex-wrap nowrap 
          .sebo-box-adjust 
            width 305px
            margin-right 20px
        .sebo-box-adjust 
          width 230px
          margin-top 10px 
          margin-bottom 10px
          margin-right 10px
@media screen and (max-width 750px) 
  
  .select-row-adjust >>> .select-row 
    justify-content space-between
    padding-right 10px
    .sebo-box 
      margin 0 !important
      margin-bottom 10px !important 
      width 100% 
         

</style>